<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分成功</title>
    <link rel="stylesheet" href="../static/css/scoreSuccess.css">
</head>

<style>
    @font-face {
        font-family: 'Muli';
        font-weight: 200 900;
        src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/Muli-VariableFont_wght.ttf") format("truetype");
    }

    @font-face {
        font-family: 'Playfair Display';
        font-weight: 400 900;
        src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/240751/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    .sr,
    #app .toolbar input[type="checkbox"] {
        position: absolute;
        left: -100vw;
        width: 1px;
        height: 1px;
        opacity: 0;
        clip: rect(1px, 1px, 1px, 1px);
    }

    .float-right {
        float: right;
        margin-left: auto;
    }

    body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    #app {
        font-family: 'Muli';
        color: #53565a;
        min-height: 100vh;
    }

    #app #grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        grid-auto-flow: dense;
        min-height: 100vh;
        -webkit-box-align: stretch;
        align-items: stretch;
    }

    #app .cell {
        width: 100%;
        line-height: 1em;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        font-size: calc(.7em + 3vmin);
        -webkit-transition: background 0.6s cubic-bezier(0.5, 0, 0.5, 1), font-weight 0.6s cubic-bezier(0.5, 0, 0.5, 1), color 0.6s cubic-bezier(0.5, 0, 0.5, 1);
        transition: background 0.6s cubic-bezier(0.5, 0, 0.5, 1), font-weight 0.6s cubic-bezier(0.5, 0, 0.5, 1), color 0.6s cubic-bezier(0.5, 0, 0.5, 1);
        font-weight: 200;
        width: 0;
        height: 0;
        padding: 50%;
        -webkit-animation: fadeOut 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards;
        animation: fadeOut 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    }

    #app .cell:not(.fade) {
        -webkit-animation: fadeIn 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards;
        animation: fadeIn 0.4s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    }

    #app .cell.m {
        grid-column: span 2;
        grid-row: span 2;
        font-size: calc(calc(.7em + 3vmin) * 2);
    }

    #app .cell.l {
        grid-column: span 3;
        grid-row: span 3;
        font-size: calc(calc(.7em + 3vmin) * 3);
    }

    #app .cell.xl {
        grid-column: span 4;
        grid-row: span 4;
        font-size: calc(calc(.7em + 3vmin) * 4);
    }

    #app .cell.xxl {
        grid-column: span 5;
        grid-row: span 5;
        font-size: calc(calc(.7em + 3vmin) * 4);
    }

    #app .cell.serif {
        font-family: 'Playfair Display', serif;
    }

    #app .cell.round {
        border-radius: 20em;
        padding: 46%;
        margin: 4%;
    }

    #app .cell[data-weight="900"] {
        font-weight: 900;
    }

    #app .cell[data-weight="200"] {
        font-weight: 200;
        background-color: #fff;
    }

    #app .cell:not(.colorized) {
        background-color: #fff !important;
        color: #53565a !important;
    }

    #app .toolbar {
        background: rgba(0, 0, 0, 0.85);
        -webkit-transition: left 0.3s cubic-bezier(0.5, 0, 0.5, 1);
        transition: left 0.3s cubic-bezier(0.5, 0, 0.5, 1);
        position: absolute;
        top: 0;
        padding: 1rem;
        height: 100vh;
        width: 100%;
        left: -100%;
    }

    @media (min-width: 420px) {
        #app .toolbar {
            max-width: 420px;
            left: -420px;
        }
    }

    #app .toolbar.shown {
        left: 0;
        overflow-y: scroll;
    }

    #app .toolbar.shown #hamburger {
        right: 0;
        background: transparent;
        top: 0;
    }

    #app .toolbar #hamburger {
        -webkit-transition: all 0.3 cubic-bezier(0.5, 0, 0.5, 1);
        transition: all 0.3 cubic-bezier(0.5, 0, 0.5, 1);
        width: 4rem;
        height: 4rem;
        background: inherit;
        position: absolute;
        right: -4rem;
        top: 1rem;
        border: none;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        font-size: 2rem;
        text-transform: uppercase;
        color: #fff;
        font-weight: 900;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }

    #app .toolbar #hamburger:focus,
    #app .toolbar #hamburger:hover {
        color: #ffd100;
        outline: none;
    }

    #app .toolbar #shuffle,
    #app .toolbar .group {
        font-size: inherit;
        font-family: inherit;
        color: inherit;
        font-weight: 700;
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
    }

    #app .toolbar #shuffle {
        border: none;
        padding: 1rem;
    }

    #app .toolbar .group {
        width: 100%;
        color: #fff;
        margin: 0 0 1.5rem;
        font-size: 1.2rem;
    }

    #app .toolbar .group>* {
        -webkit-box-flex: 1;
        flex: 1 1 100%;
        margin-top: .5rem;
    }

    #app .toolbar label {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }

    #app .toolbar input[type="checkbox"]+label:before {
        content: '';
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        border: 2px solid;
        margin-right: .5em;
    }

    #app .toolbar input[type="checkbox"]:checked+label:after {
        content: '';
        width: .8rem;
        height: 1.2rem;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-bottom: 0.3rem solid #ffd100;
        border-right: 0.3rem solid #ffd100;
        left: .3rem;
        bottom: .3rem;
        position: absolute;
        z-index: 2;
    }

    #app .toolbar input[type="checkbox"]:focus+label {
        color: #ffd100;
    }

    #app .toolbar button {
        -webkit-transition: background 0.2s cubic-bezier(0.5, 0, 0.5, 1);
        transition: background 0.2s cubic-bezier(0.5, 0, 0.5, 1);
    }

    #app .toolbar button:focus,
    #app .toolbar button:hover {
        outline: none;
        background-color: #ffd100;
    }

    #app .toolbar textarea {
        width: 100%;
        min-height: 3.5em;
        border: none;
        font-family: inherit;
        padding: .5em;
        font-size: inherit;
        background: transparent;
        border: 2px solid #fff;
        color: #fff;
    }

    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
            -webkit-transform: translateY(1em);
            transform: translateY(1em);
        }

        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            -webkit-transform: translateY(1em);
            transform: translateY(1em);
        }

        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @-webkit-keyframes fadeOut {
        from {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        to {
            opacity: 0;
            -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        to {
            opacity: 0;
            -webkit-transform: translateY(-1em);
            transform: translateY(-1em);
        }
    }
</style>

<body translate="no">
    <div style="margin-top: 5%;margin-left: 35%;"  class="cancel">
        <label for="" style="font-size: 2rem;font-family: 华文新魏;color: rgb(210, 30, 30);">在此点击返回调查问卷--></label>

        <input type="button" onclick="questionnaire()" value="返回">
    </div>
    <div id="app" >
        <div id="grid">
            <div v-for="cell, index in grid" class="cell" :class="[colorize && 'colorized', getCellClasses(cell)]"
                :data-weight="cell.weight" :style="{backgroundColor: cell.color.bg, color: cell.color.fg}"
                @mouseover="hoverLetter" @click="randomLetter" :key="index" :data-serif="cell.serif">
            </div>
        </div>
        <div class="toolbar" :class="isToolbarOpen && 'shown'">
            <div :aria-hidden="!isToolbarOpen" :hidden="!isToolbarOpen">
                <div class="group">
                    <label for="characters">Character set:</label>
                    <textarea id="characters" @input="regenerateGrid" v-model="characters"></textarea>
                </div>
                <div class="group">
                    <label for="serifPercentage">Chances of serif cell: <span
                            class="float-right">{{ serifPercentage }}%</span></label>
                    <input id="serifPercentage" @input="regenerateGrid" v-model="serifPercentage" type="range" min="0"
                        max="100"></input>
                </div>
                <div class="group">
                    <label for="blankPercentage">Chances of blank cell: <span
                            class="float-right">{{ blankPercentage }}%</span></label>
                    <input id="blankPercentage" @input="regenerateGrid" v-model="blankPercentage" type="range" min="0"
                        max="100"></input>
                </div>
                <div class="group">
                    <label for="roundPercentage">Chances of round cell: <span
                            class="float-right">{{ roundPercentage }}%</span></label>
                    <input id="roundPercentage" @input="regenerateGrid" v-model="roundPercentage" type="range" min="0"
                        max="100"></input>
                </div>
                <div class="group">
                    <input type="checkbox" v-model="colorize" id="colorize">
                    <label for="colorize">Colorize cells</label>
                    <input type="checkbox" v-model="changeCharOnClick" id="changeCharOnClick">
                    <label for="changeCharOnClick">Change characters on click</label>
                    <input type="checkbox" v-model="changeCharOnHover" id="changeCharOnHover">
                    <label for="changeCharOnHover">Change characters on hover</label>
                    <template v-if="changeCharOnClick || changeCharOnHover">
                        <input type="checkbox" v-model="fancyCharShuffle" id="fancyCharShuffle">
                        <label for="fancyCharShuffle">Fancy character shuffle</label>
                    </template>
                </div>
                <button id="shuffle" @click="() => { regenerateGrid(true) }">Generate New Grid</button>
            </div>
            <button id="hamburger" @click="toggleToolbar" :class="isToolbarOpen && 'shown'">
                {{ menuBtnText }}
            </button>
        </div>
    </div>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
    <script>
        const darkGray = "#53565a";
        const white = "#fff";
        const yellow = "#ffd100";
        const orange = "#ff6a13";
        const lightBlue = "#7ba7bc";
        const darkBlue = "#34657f";
        const lightGray = "#a7a8aa";

        const app = new Vue({
            el: "#app",
            data: () => ({
                grid: undefined,
                gridSize: undefined,
                characters:
                    "àåabcdeéêfghijklmnñoöpqrstuvwxyzAÀBCDEÉFGHIJKLMNÑÖOPQRSTUVWXYZ0123456789!π¢£ø@#$%^&*()+{}?”“;",
                colors: [
                    { bg: white, fg: darkGray },
                    { bg: white, fg: orange },
                    { bg: white, fg: darkBlue },
                    { bg: white, fg: lightBlue },
                    { bg: yellow, fg: darkGray },
                    { bg: orange, fg: darkGray },
                    { bg: lightBlue, fg: darkBlue },
                    { bg: darkBlue, fg: white },
                    { bg: darkBlue, fg: lightBlue },
                    { bg: lightGray, fg: white },
                    { bg: darkGray, fg: yellow }
                ],
                colorize: true,
                changeCharOnClick: true,
                changeCharOnHover: false,
                fancyCharShuffle: false,
                isToolbarOpen: false,
                serifPercentage: 30,
                blankPercentage: 10,
                roundPercentage: 10
            }),
            mounted() {
                window.addEventListener("resize", e => this.regenerateGrid());
                this.regenerateGrid();
                if (Modernizr.touch) this.changeCharOnClick = false;
            },
            methods: {
                setGridSize() {
                    const cellSize = 70;
                    const gridWidth = Math.floor(window.innerHeight / cellSize);
                    const gridHeight = Math.floor(window.innerWidth / cellSize);
                    const finalCellCount = gridWidth * gridHeight + gridWidth * 3;

                    this.gridSize = finalCellCount;
                    return finalCellCount;
                },
                regenerateGrid(closeMenu) {
                    clearTimeout(this.nextShuffle);
                    clearTimeout(this.unfade);

                    this.fadeCells();

                    this.nextShuffle = setTimeout(() => {
                        this.resetGrid();
                    }, 800);

                    this.unfade = setTimeout(() => {
                        this.fadeCells(true);
                    }, 800);
                    if (closeMenu === true) this.isToolbarOpen = false;
                },
                resetGrid() {
                    this.setGridSize();
                    this.grid = [];
                    let filled = 0;
                    while (filled < this.gridSize) {
                        const cell = this.generateRandomCell();
                        const { size } = cell;
                        const squared = size * size;
                        const leftToFill = this.gridSize - filled;

                        if (leftToFill > squared) {
                            this.grid.push(cell);
                            filled += squared;
                        } else {
                            for (i = 0; i < leftToFill; i++) {
                                this.grid.push({ ...cell, size: 1 });
                                filled += 1;
                            }
                        }
                    }
                    this.$nextTick(() => {
                        this.fadeCells(true);
                    });
                },
                fadeCells(out) {
                    const cells = document.querySelectorAll(".cell");
                    if (out === true) {
                        this.$nextTick(() => {
                            cells.forEach(cell => {
                                const delay = this.d100() * 4;
                                setTimeout(() => {
                                    cell.classList.remove("fade");
                                }, delay);
                            });
                        });
                    } else {
                        cells.forEach(cell => {
                            const delay = this.d100() * 4;
                            setTimeout(() => {
                                cell.classList.add("fade");
                            }, delay);
                        });
                    }
                },
                generateRandomCell() {
                    return {
                        char: this.getRandomChar(),
                        size: this.setCellSize(),
                        serif: this.d100(),
                        blank: this.d100(),
                        round: this.d100(),
                        color: this.setCellColor(),
                        weight: this.setCellWeight()
                    };
                },
                getRandomChar() {
                    return this.characters[Math.floor(Math.random() * this.characters.length)];
                },
                hoverLetter(e) {
                    const weight = parseInt(e.target.dataset.weight);
                    const randomColor = this.randomColor();
                    e.target.classList.add("hovered");
                    if (weight > 200) {
                        e.target.dataset.weight = 200;
                        e.target.style.backgroundColor = this.colorize && white;
                        e.target.style.color = darkGray;
                    } else {
                        e.target.dataset.weight = 900;
                        e.target.style.backgroundColor = this.colorize && randomColor.bg;
                        e.target.style.color = this.colorize && randomColor.fg;
                    }
                    if (this.changeCharOnHover) {
                        this.randomLetter(e);
                    }
                },
                randomLetter(e) {
                    if (!this.changeCharOnClick) return;
                    if (!this.fancyCharShuffle) {
                        e.target.innerText = this.getRandomChar();
                    } else {
                        let delay = 18;
                        for (i = 0; i < 10; i++) {
                            setTimeout(() => {
                                e.target.innerText = this.getRandomChar();
                            }, delay);
                            delay += delay * 0.4;
                        }
                    }
                },
                toggleToolbar() {
                    this.isToolbarOpen = !this.isToolbarOpen;
                },
                //Set a random size for a cell. The bigger, the more rare.
                setCellSize() {
                    const size = this.d100();
                    if (size === 100 && window.innerWidth > 1600) return 5;
                    if (size > 97 && window.innerWidth > 900) return 4;
                    if (size > 92) return 3;
                    if (size > 80) return 2;
                    return 1;
                },
                setCellDelay() {
                    const delay = this.d100();
                    return delay * 5;
                },
                setCellColor() {
                    const colorOdds = this.d100();
                    return colorOdds > 40 ? this.randomColor() : this.colors[0];
                },
                setCellWeight() {
                    const weight = this.d100();
                    return weight < 70 ? 200 : 900;
                },
                randomColor() {
                    return this.colors[Math.floor(Math.random() * this.colors.length)];
                },
                d100() {
                    return Math.floor(Math.random() * 100 + 1);
                },
                cellNumberToSize(no) {
                    if (no === 5) return "xxl";
                    if (no === 4) return "xl";
                    if (no === 3) return "l";
                    if (no === 2) return "m";
                    return "s";
                },
                getCellClasses(cell) {
                    let classes = [];
                    if (cell.serif < this.serifPercentage) classes.push("serif");
                    if (cell.round < this.roundPercentage) classes.push("round");
                    classes.push(this.cellNumberToSize(cell.size));
                    return classes.join(" ");
                }
            },
            computed: {
                menuBtnText() {
                    return this.isToolbarOpen ? "×" : "›";
                }
            }
        });

    </script>
</body>

</html>

<script src="../static/js/canvas-particle.js"></script>
<script src="../static/js/jquery-3.6.0.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        layer.msg('评分成功');
    });
</script>
<script>

    function questionnaire() {
        axios({
            method: 'post',
            url: '/questionnaire'
        }).then(function (response) {
            let res = response.data;
            if (res.code === 200) {
                window.location.href = '/index/goQuestionnaire';
            }
        }).catch((err) => {
        });
    }
</script>